<nz-card [nzTitle]="l('SignUp')">
    <form nz-form #registerForm="ngForm" (ngSubmit)="save()" role="form" novalidate method="post">
        <nz-form-item>
            <nz-form-control nzHasFeedback>
                <input nz-input name="Name" #nameInput='ngModel' [(ngModel)]="model.name" placeholder="{{'Name' | localize}}"
                    required maxlength="32">
                <nz-form-explain *ngIf="nameInput.dirty && nameInput.errors">
                    <validation-messages [formCtrl]="nameInput"></validation-messages>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control nzHasFeedback>
                <input nz-input name="Surname" #surnameInput="ngModel" [(ngModel)]="model.surname" placeholder="{{'Surname' | localize}}"
                    required maxlength="32">
                <nz-form-explain *ngIf="surnameInput.dirty && surnameInput.errors">
                    <validation-messages [formCtrl]="surnameInput"></validation-messages>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control nzHasFeedback>
                <input nz-input type="email" name="EmailAddress" #emailAddressInput="ngModel" [(ngModel)]="model.emailAddress"
                    placeholder="{{'EmailAddress' | localize}}" required email>
                <nz-form-explain *ngIf="emailAddressInput.dirty && emailAddressInput.errors">
                    <validation-messages [formCtrl]="emailAddressInput"></validation-messages>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control nzHasFeedback>
                <input nz-input name="UserName" autocomplete="off" #userNameInput="ngModel" [(ngModel)]="model.userName"
                    placeholder="{{'UserName' | localize}}" required maxlength="32">
                <nz-form-explain *ngIf="userNameInput.dirty && userNameInput.errors">
                    <validation-messages [formCtrl]="userNameInput"></validation-messages>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control nzHasFeedback>
                <input nz-input type="password" name="Password" class="form-control" [(ngModel)]="model.password"
                    #Password="ngModel" placeholder="{{'Password' | localize}}" validateEqual="PasswordRepeat" reverse="true"
                    [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                    [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                    [requiredLength]="passwordComplexitySetting.requiredLength" required>
                <nz-form-explain [hidden]="Password.valid || Password.pristine">
                    <ul *ngIf="Password.errors">
                        <li [hidden]="!Password.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                        <li [hidden]="!Password.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                        <li [hidden]="!Password.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                        <li [hidden]="!Password.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                        <li [hidden]="!Password.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                    </ul>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control nzHasFeedback>
                <input nz-input type="password" name="PasswordRepeat" class="form-control" [ngModel]="model.passwordRepeat"
                    #PasswordRepeat="ngModel" placeholder="{{'PasswordRepeat' | localize}}" validateEqual="Password" reverse="false"
                    [requireDigit]="passwordComplexitySetting.requireDigit" [requireLowercase]="passwordComplexitySetting.requireLowercase"
                    [requireUppercase]="passwordComplexitySetting.requireUppercase" [requireNonAlphanumeric]="passwordComplexitySetting.requireNonAlphanumeric"
                    [requiredLength]="passwordComplexitySetting.requiredLength" required>
                <nz-form-explain [hidden]="PasswordRepeat.valid || PasswordRepeat.pristine">
                    <ul *ngIf="PasswordRepeat.errors">
                        <li [hidden]="!PasswordRepeat.errors.requireDigit">{{"PasswordComplexity_RequireDigit_Hint" | localize}}</li>
                        <li [hidden]="!PasswordRepeat.errors.requireLowercase">{{"PasswordComplexity_RequireLowercase_Hint" | localize}}</li>
                        <li [hidden]="!PasswordRepeat.errors.requireUppercase">{{"PasswordComplexity_RequireUppercase_Hint" | localize}}</li>
                        <li [hidden]="!PasswordRepeat.errors.requireNonAlphanumeric">{{"PasswordComplexity_RequireNonAlphanumeric_Hint" | localize}}</li>
                        <li [hidden]="!PasswordRepeat.errors.requiredLength">{{"PasswordComplexity_RequiredLength_Hint" | localize:passwordComplexitySetting.requiredLength}}</li>
                        <li [hidden]="PasswordRepeat.valid">{{"PasswordsDontMatch" | localize}}</li>
                    </ul>
                </nz-form-explain>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row nzGutter="8">
            <nz-col nzSm="12">
                <button nz-button nzType="primary" nzSize="large" type="submit" [nzLoading]="saving" [disabled]="!registerForm.form.valid||saving" nzBlock>
                    {{"Register" | localize}}
                </button>
            </nz-col>
            <nz-col nzSm="12">
                <button nz-button nzType="default" nzSize="large" type="button" [disabled]="saving" routerLink="/account/login"
                    nzBlock>{{"Back" | localize}}</button>
            </nz-col>
        </nz-form-item>
    </form>
</nz-card>